<style scoped lang="scss">
.bigBox {
  width: 100vw;
  height: 100vh;
  background-image: url(../../assets/login_bg.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  header {
    width: 100%;
    height: 50px; // 100px * 0.5
  }
  main {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
   .imgone {
      width: 80px; // 160px * 0.5
      height: 70px; // 140px * 0.5
      margin-bottom: 40px; // 80px * 0.5
      border-radius: 50%;
      background-color: #fff;
    }
   .box {
      width: 290px; // 580px * 0.5
      height: 430px; // 860px * 0.5
      padding: 5px; // 10px * 0.5
      border-radius: 4px; // 8px * 0.5
      background-color: #fff;
      z-index: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
     .boxone {
        width: 280px; // 560px * 0.5
        height: 40px; // 80px * 0.5
        border-bottom: 0.5px solid #ccc; // 1px * 0.5
        display: flex;
        justify-content: space-between;
        align-items: center;
        input {
          width: 180px; // 360px * 0.5
          height: 30px; // 60px * 0.5
          border: none;
        }
        input::placeholder {
          color: #b0acac;
        }
        button {
          width: 80px; // 160px * 0.5
          height: 25px; // 50px * 0.5
          // padding: 5px; // 10px * 0.5
          border-radius: 7px; // 14px * 0.5
          font-size: 10.5px; // 21px * 0.5
          background-color: #3087ea;
          color: #fff;
          border: none;
        }
      }
     .zhuce {
        width: 285px; // 570px * 0.5
        height: 40px; // 80px * 0.5
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
   .box-one {
      width: 282px; // 564px * 0.5
      height: 350px; // 700px * 0.5
      border-bottom-left-radius: 4px; // 8px * 0.5
      border-bottom-right-radius: 4px; // 8px * 0.5
      background-color: rgba(255, 255, 255, 0.5);
      position: absolute;
      top: 257.5px; // 515px * 0.5
    }
   .box-two {
      width: 265px; // 530px * 0.5
      height: 350px; // 700px * 0.5
      border-bottom-left-radius: 4px; // 8px * 0.5
      border-bottom-right-radius: 4px; // 8px * 0.5
      background-color: rgba(255, 255, 255, 0.4);
      position: absolute;
      top: 264px; // 528px * 0.5
    }
  }
  footer {
    width: 100%;
    height: 50px; // 100px * 0.5
  }
}

</style>

<template>
  <div class="bigBox">
    <header>
      <van-nav-bar style="background-color: #3087ea" />
    </header>
    <main>
      <div class="imgone">
        <img style="width: 100%; height: 100%" src="../../assets/bluehear.png" alt="" />
      </div>
      <div class="box" :model="values" :rules="regRules" ref="registerForm">
        <div class="boxone">
          <div><van-icon style="font-size: 50px; color: #757575" name="envelop-o" /></div>
          <div><input type="text" placeholder="请输入邮箱" v-model="values.email" /></div>
          <div>
            <button @click="getCode">{{ codeMsg }}</button>
          </div>
        </div>
        <div class="boxone">
          <div>
            <img
              style="width: 44px; height: 48px"
              src="../../assets/images/icon/common resource/xxhdpi/register_icon_verification_code_n.png"
              alt=""
            />
          </div>
          <div><input type="text" placeholder="请输入验证码" v-model="values.code" /></div>
          <div style="width: 140px"></div>
        </div>
        <div class="boxone">
          <div>
            <img
              style="width: 44px; height: 48px"
              src="../../assets/images/icon/common resource/xxhdpi/login_icon_lock_n.png"
              alt=""
            />
          </div>
          <div><form> <input type="password" placeholder="请输入密码" v-model="values.pwd1" /></form></div>
          <div style="width: 140px; text-align: center">
            <img
              style="width: 40px; height: 24px"
              src="../../assets/images/icon/common resource/xxhdpi/login_icon_hide_password_n.png"
              alt=""
            />
          </div>
        </div>
        <div class="boxone">
          <div>
            <img
              style="width: 44px; height: 48px"
              src="../../assets/images/icon/common resource/xxhdpi/login_icon_lock_n.png"
              alt=""
            />
          </div>
          <div> <form><input type="password" placeholder="请再次输入密码" v-model="values.pwd2" /></form></div>
          <div style="width: 140px; text-align: center">
            <img
              style="width: 40px; height: 24px"
              src="../../assets/images/icon/common resource/xxhdpi/login_icon_hide_password_n.png"
              alt=""
            />
          </div>
        </div>
        <div class="boxone">
          <div><van-icon style="font-size: 50px; color: #757575" name="user-circle-o" /></div>
          <div>
            <input type="text" placeholder="请输入邀请码" v-model="values.invitationCode" />
          </div>
          <div style="width: 140px; text-align: center"><p style="font-size: 26px">选填</p></div>
        </div>
        <div class="zhuce">
          <van-button @click="zhuce" style="width: 540px" size="small" type="primary"
            >注册</van-button
          >
        </div>
      </div>
      <div class="box-one"></div>
      <div class="box-two"></div>
    </main>
    <footer></footer>
  </div>
</template>

<script lang="ts" setup>
import { useRouter } from 'vue-router'
// import { userStore } from '@/stores/user'
import { request } from '@/axios/request'
import { ref } from 'vue'
import { JSEncrypt } from 'jsencrypt'
import { ElMessage } from 'element-plus'
import { showNotify } from 'vant'
const router = useRouter()

// const UserStore = userStore()
const values = ref({
  email: '',
  code: '',
  pwd1: '',
  pwd2: '',
  invitationCode: 'RTTNASJBQI',
})
// 获取验证码
const codeMsg = ref('获取验证码')
let disabled = ref(false)
const getCode = async () => {
  if (!/^[^@]+@[^@]+\.[^@]+$/.test(values.value.email)) {
    ElMessage({
          message: '邮箱格式不正确',
          type: 'error',
        })
    return
  }
  await request
    .post(
      'health/user/v1/sendOutEmailCode',
      {
        email: values.value.email,
      },
      {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
        },
      },
    )
    .then((res) => {
      let { status, message } = res.data
      if (status === '0000') {
        ElMessage({
          message: '获取成功',
          type: 'success',
        })
        let timer = ref(6)
        disabled.value = true
        let time = setInterval(() => {
          timer.value--
          codeMsg.value = `${timer.value}秒后重新获取`
          if (timer.value === 0) {
            clearInterval(time)
            timer.value = 6
            disabled.value = false
            codeMsg.value = '获取验证码'
          }
        }, 1000)
      } else {
        ElMessage({
          message,
          type: 'error',
        })
      }
    })
  // console.log(res)
  // if (res.data.status === '0000') {
  //   console.log({ type: 'success', message: '发送成功' })
  // }
}
// 正则验证
const registerForm = ref()
const regRules = ref({
  email: { required: true, message: '邮箱不能为空', trigger: 'blur' },
  code: { required: true, message: '验证码不能为空', trigger: 'blur' },
  pwd1: { required: true, message: '密码不能为空', trigger: 'blur' },
  pwd2: { required: true, message: '确认密码不能为空', trigger: 'blur' },
})

// 注册
const zhuce = async () => {
  if (!values.value.code) {
    ElMessage({
          message: '验证码不能为空',
          type: 'error',
        })
    return
  }
  if (values.value.pwd1.trim() === '' || values.value.pwd2 === '') {
    ElMessage({
          message: '密码不能为空',
          type: 'error',
        })
    return
  }
  if (values.value.pwd1 !== values.value.pwd2) {
    ElMessage({
          message: '两次密码不一致',
          type: 'error',
        })
    return
  }
  const crypt = new JSEncrypt()
  const publicKey =
    'MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCuQd3gESx7VdIyRYUWjmjg61VIgUK6F45hClmqUMZ7xNiT5rlLM6e78osMvBF/yP7cVm7pK+NMCDWoVS1/AETpxJYqUlIC77ZAU8/MnP96IupnJL87vqhPcpdv7+VqLM38ls++yuD/F/HSoOQTv/leJh+dgE/4EYAJjOWFAbYfXwIDAQAB'
  crypt.setPublicKey(publicKey)
  const newPwd = ref(crypt.encrypt(values.value.pwd1))
  console.log(newPwd.value)
  //调用注册接口
  await request
    .post(
      '/health/user/v1/register',
      {
        email: values.value.email,
        code: values.value.code,
        pwd1: newPwd.value,
        pwd2: newPwd.value,
        invitationCode: values.value.invitationCode,
      },
      {
        headers: {
          ...values.value,
          'Content-Type': 'application/x-www-form-urlencoded',
        },
      },
    )
    .then((res) => {
      console.log(res)
      if (res.status === 200) {
        ElMessage({
          message: '注册成功',
          type: 'success',
        })
        router.push({ path:'/login' })
      } else {
        ElMessage({
          message: '注册失败',
          type: 'error',
        })
      }
    })

  // var res = UserStore.regist({ ...values.value })
  // router.push('/login')
}
</script>
